<template>
  <!--系统管理--权限管理-->
  <div class="content-area rbacManage">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="search-area">
      <div class="search-content">
        <div class="search-item"><span>编码:</span>
          <el-input placeholder="请输入内容" v-model="searchData.code" clearable></el-input>
        </div>
        <div class="search-item">
          <span>类型:</span>
          <el-select v-model="searchData.type" placeholder="请选择" clearable>
            <el-option key="1" label="接口" value="1"></el-option>
            <el-option key="2" label="页面" value="0"></el-option>
          </el-select>
        </div>
      </div>
      <div class="search-footer">
        <button class="search-btn" @click="searchRbac">查询</button>
      </div>
    </div>

    <!--内容-->
    <div class="main-content">
      <div class="content-info">

        <!-- 表格数据与翻页合并模块 -->
        <DataTable :childLoad="parentLoad" :dataTableObj="dataTableObj" v-on:getPageNo="searchByPageNo" v-on:handlePageReload="pageReload"
                   v-on:getPageSize="searchByPageSize">
          <!--除查询外的操作-->
          <div slot="operate">
            <div class="some-operate">
              <button class="some-btn some-btn-add" @click="$goRoute('/manage/systemMgr/rbacMgr/addRbacGroup')">添加
              </button>
            </div>
          </div>
          <!-- 额外的操作以及其他因素 -->
          <div>
            <el-table-column fixed="right" align="center" label="操作" width="100">
              <template slot-scope="scope">
                <el-button class="edit-button" @click="editAuthorityMsg(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </div>

        </DataTable>

      </div>
    </div>
    <el-dialog title="修改权限信息:" :visible.sync="showDialogAuthorityMsg">
      <div class="edit-authority-msg">
        <el-form :inline="true" status-icon class="my-form my-form-600" ref="authorityMsg" :model="authorityMsg"
                 label-width="100px" size="medium">
          <el-form-item label="名称:">
            <el-input v-model="authorityMsg.name"></el-input>
          </el-form-item>
          <el-form-item label="权限编码:">
            <el-input v-model="authorityMsg.code"></el-input>
          </el-form-item>
          <el-form-item label="路径地址:">
            <el-input v-model="authorityMsg.page"></el-input>
          </el-form-item>
          <el-form-item label="网络请求:">
            <el-input type="textarea" v-model="authorityMsg.path"></el-input>
          </el-form-item>
          <el-form-item label="选择类型:">
            <el-select v-model="authorityMsg.type" placeholder="--请选择类型--">
              <el-option v-for="item in typeArr" :key="item.type" :label="item.text"
                         :value="item.type"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述:">
            <el-input v-model="authorityMsg.description"></el-input>
          </el-form-item>
        </el-form>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialogAuthorityMsg = false">取 消</el-button>
        <el-button type="primary" @click="changeAuthorityMsg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  // 表格数据
  import DataTable from "../../../components/dataTable/dataTable"
  import com from "../../../js/common"

  import HeadTop from "../../../components/head-top/head-top"

  import {rbacPage, rbacUpdate} from '@/api/getData'

  export default {
    name: 'rbacManage',
    components: {
      DataTable,
      HeadTop
    },
    data() {
      return {
        parentLoad: '加载中...',    // 加载状态
        // 是否为查看下属
        lookDown: true,

        // 搜索区域数据
        searchData: {
          type: '',
          code: '',
        },

        // 表格组件数据
        dataTableObj: {

          // 表格数据
          tableData: [],
          // 表格标题
          tableColumns: [
            {
              text: '序号',
              width: '60',
              attributeName: 'index'
            },
            {
              text: '名称',
              width: '80',
              attributeName: 'name'
            },
            {
              text: '编码',
              width: '100',
              attributeName: 'code'
            },
            {
              text: '类型',
              width: '80',
              attributeName: 'typeText'
            },
            {
              text: '状态',
              width: '50',
              attributeName: 'status'
            },
            {
              text: '路径',
              width: '100',
              attributeName: 'page'
            },
            {
              text: '网络请求',
              width: '200',
              attributeName: 'path'
            },
            {
              text: '描述',
              width: '100',
              attributeName: 'description'
            }
          ],

          // 翻页所需数据
          pageObj: {
            // 每页分为几条数据
            pageSize: 10,
            // 总共多少数据
            pageNum: 0,
            // 当前页
            pageNo: 1,
            searchStatus: 2,
          },
        },

        // 查询条件
        searchMsg: {
          type: '',
          code: '',
        },
        typeArr: [
          {
            text: '有路径',
            type: 1,
          },
          {
            text: '无路径',
            type: 0,
          },
        ],
        // 权限信息
        authorityMsg: {
          name: '',
          path: '',
          description: '',
          type: '',
          code: ''
        },
        // 权限修改弹窗显示
        showDialogAuthorityMsg: false,
      }
    },
    mounted() {

      // 获取当前页面所需数据
      this.getRbacManageData()
    },
    methods: {

      // 获取页面所需数据
      getRbacManageData(obj) {
        let self = this;
        rbacPage({
          pageNo: self.dataTableObj.pageObj.pageNo,
          pageSize: self.dataTableObj.pageObj.pageSize,
          condition: self.searchData
        }).then((data) => {

          self.dataTableObj.pageObj.searchStatus = 1
          let info = data.data.data
          let infoArr = info.data
          if (infoArr.length > 0) {
            infoArr.forEach((i, t) => {
              i.index = (t + 1) + self.dataTableObj.pageObj.pageSize * (self.dataTableObj.pageObj.pageNo - 1);
              i.typeText = i.type === 1 ? '有路径' : '无路径'
            });
          } else {
            this.parentLoad = '暂无数据'    // loading(暂无数据)
          }

          self.dataTableObj.tableData = infoArr
          self.dataTableObj.pageObj.pageNum = info.totalRecord

        }).catch(function (data) {
          self.$message.error(data.data.message)
          self.parentLoad = data.data.message    // loading(查询失败)
          self.dataTableObj.pageObj.searchStatus = 0
        })
      },

      // 每页多少内容
      searchByPageSize(val) {
        this.dataTableObj.pageObj.pageSize = val
        this.getRbacManageData();
      },

      // 切换第几页
      searchByPageNo(val) {
        // 切换每页数目
        this.dataTableObj.pageObj.pageNo = val
        this.getRbacManageData()
      },

      searchRbac: function () {
        // 跳出查询等待框
        this.searchData.role = this.searchMsg.role
        this.searchData.username = this.searchMsg.username
        this.getRbacManageData()
      },
      // 编辑权限信息显示弹窗
      editAuthorityMsg(row) {
        this.authorityMsg = row
        this.showDialogAuthorityMsg = true
      },
      // 确定修改权限信息
      changeAuthorityMsg() {
        rbacUpdate(this.authorityMsg).then((res) => {
          com.mask()
          this.$message.success({
            message: '修改成功',
            duration: 1500,
            onClose: () => {
              com.unmask()
              this.showDialogAuthorityMsg = false
            }
          })
        }).catch(err => this.$message.error(err.data.message))
      },

      // 页面刷新
      pageReload(){
        this.getRbacManageData();
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
  @import "../../../style/entry/components/pageCommon";

  .rbacManage {
    .edit-button {
      width: 50px;
      height: 26px;
      background: #e69e1b;
      text-align: center;
      padding: 0;
      line-height: 26px;
      font-size: 12px;
      color: #fff;
      border-radius: 5px;
      border: none;
    }
  }

</style>
